<template>
  <div id="app1">
    <el-button type="primary" @click="insertDialogFormVisible = true">新增</el-button>
  <el-dialog title="新增分类" :visible.sync="insertDialogFormVisible">
          <el-form :model="form">
            <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="insertDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="inserOnSubmit">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
  export default{
  name:'app7',
    data() {
    	return {
        insertDialogFormVisible: false,
        form:{
          name:''
        },
        formLabelWidth: '120px'
    	}
    },
    methods:{
     //新增
     inserOnSubmit: function(){
       let formData = new FormData;
       formData.append("name",this.form.name);
       this.$http({
         method:'post',
         url:'category/insert',
         headers:{
           "Authorization": sessionStorage.getItem('token')
         },
         data:formData
       }).then(res =>{
         if (res.data.code === 200) {
           // 提交成功将要执行的代码
           this.insertDialogFormVisible = false;
           //刷新列表
           this.getData();
         }
       })
     }
    }

  }
</script>

<style>
</style>
